<template>
  <div class="masonry-view">
    <ul v-masonry transition-duration="1s" item-selector=".item" :gutter="10" v-if="(dataArr && dataArr.length > 0 )">
      <li v-masonry-tile class="item" v-for="(r, i) in dataArr" :key="i">

        <div class="box" v-if="r.postData" v-lazy="r.postData.postView.firstImage?.orign"
          @click="goToHomeItem(r.itemId, r.postData.postView.type, r.postData.postView.permalink)">

          <div class="img" v-if="r.postData && r.postData.postView">
            <i class="play" v-if="r.postData.postView.type == 4"></i>
            <img :src="r.postData.postView.firstImage?.orign" v-if="r.postData.postView.firstImage?.orign" />
            <span class="photo-count" v-if="r.postData.postView.firstImage?.orign && !video">
              {{ r.postData.postView.photoCount }}
            </span>
          </div>

          <div class="text" :class="[r.postData.postView.type == 1 ? 'article' : '']"
            v-if="r.postData && r.postData.postView">
            <div class="van-multi-ellipsis--l2" v-if="r.postData" v-html="r.postData.postView.digest"></div>
            <i></i>
          </div>

          <div class="tag" v-if="r.postData && r.postData.postView">
            <span v-if="r.postData">#{{ r.postData.postView.tagList[0] }}</span>
          </div>

          <div class="bottom" v-if="r.postData && r.postData.postView">
            <div class="user">
              <img :src="r.blogInfo.bigAvaImg" />
              <div class="van-ellipsis">{{ r.blogInfo.blogNickName }}</div>
            </div>
            <div class="favorite" v-if="r.postData.postCount">
              <i :class="[r.postData.postCount.viewCount == 1 ? 'selected' : '']"
                @click.stop="switchSelected(r.itemId, r.postData.postView.firstImage?.orign)">
              </i>
              <span>{{ numberFormat(r.postData.postCount.favoriteCount) }}</span>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs } from "vue"
import router from "@/router";
import type { DataType } from "@/typings"
import { numberFormat } from "@/utils/numberFormat"

let dataArr = ref<Array<DataType>>([])


const props = defineProps({
  dataArr: {
    type: Array<DataType>,
    default: []
  },
  switchSelected: {
    type: Function,
    required: true
  },
  video: {
    type: Boolean,
    default: false
  }
})

dataArr.value = props.dataArr

let { switchSelected, video } = toRefs(props)


const goToHomeItem = (id: number, type: number, permalink: string) => {
  if (type === 4) {
    router.push({
      name: "video-details",
      query: {
        permalink
      }
    });
  } else {
    router.push({
      name: "item",
      query: {
        id
      }
    });
  }

}
</script>

<style lang="scss" scoped>
.masonry-view {
  // width: 100vw; 

  ul {
    min-height: 100vh;

    li {
      width: 45%;
      padding: 5px;
      margin: 10px 0;
      position: relative;

      .box {

        .img {
          width: 100%;
          position: relative;

          .play {
            width: 50px;
            height: 50px;
            display: block;
            background-image: url("@/assets/images/home/_0o.png");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 50;
          }

          img {
            display: block;
            width: 100%;
            border: 1px solid #f2f2f2;
            border-radius: 10px;
          }

          .photo-count {
            width: 20px;
            height: 20px;
            line-height: 20px;
            font-size: 14px;
            padding: 2px;
            text-align: center;
            color: rgb(255, 255, 255);
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 999px;
            position: absolute;
            right: 10px;
            bottom: 10px;
          }
        }

        .text {
          height: 32px;
          display: flex;
          margin: 10px 0 0 0;
          justify-content: space-between;

          div {
            width: 95%;
            font-size: 16px !important;
            overflow: hidden;

            ::v-deep(p) {
              margin: 0;
              line-height: 16px;
            }
          }

          i {
            width: 20px;
            height: 20px;
            display: block;
            background-image: url("@/assets/images/home/0Yh.png");
            background-repeat: no-repeat;
            background-position: center center;
            background-size: contain;
          }
        }

        .article {
          min-height: 100px;
          max-height: 350px;
          position: relative;

          div {
            border-radius: 10px;
            background-color: #f5f5f5;
            overflow: hidden;
          }

          i {
            position: absolute;
            bottom: -28px;
            right: 10px;
          }


          ::v-deep(.van-multi-ellipsis--l2) {
            p {
              padding: 5px 0;
              white-space: nowrap;
              /* 2.超出的部分隐藏 */
              overflow: hidden;
              /* 3.文字用省略号替代超出的部分 */
              text-overflow: ellipsis;
              color: #949494;

              &:nth-child(1) {
                color: #000;
                font-size: 16px;
                font-weight: 700;
                padding: 15px 0;
                max-height: 80px;
              }
            }

          }
        }

        .tag {
          margin: 10px 0;

          span {
            padding: 3px 6px;
            font-size: 12px;
            color: #bfbfbf;
            border-radius: 10px;
            background-color: #f5f5f5;
          }
        }

        .bottom {
          margin-top: 5px;
          display: flex;
          justify-content: space-between;

          .user {
            display: flex;
            align-items: center;

            img {
              width: 20px;
              height: 20px;
              border-radius: 999px;
              margin-right: 3px;
            }

            div {
              width: 90px;
              font-size: 12px;
              color: #bfbfbf;
            }
          }

          .favorite {
            display: flex;
            align-items: center;

            i {
              width: 20px;
              height: 20px;
              display: block;
              background-image: url("@/assets/images/home/2uA.png");
              background-repeat: no-repeat;
              background-position: center center;
              background-size: contain;
              margin-right: 3px;
            }

            .selected {
              background-image: url("@/assets/images/home/5vM.png");
            }

            span {
              font-size: 12px;
              color: #bfbfbf;
            }
          }
        }
      }

    }
  }
}
</style>